import { PureComponent } from 'react';
import moment from 'moment';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Modal,
    DatePicker,
    Button,
    Cascader
} from 'antd';
import styles from './StaffInfoList.less';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
 	labelCol: { span: 10 },
   	wrapperCol: { span: 14 },
};

@Form.create()
class UpdateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	    if(props.values) {
	    	this.state = {
	    			formVals: {
	    				id: props.values.id,
	    				punid: props.values.punid,
						qq: props.values.qq,
						wx: props.values.wx,
						email: props.values.email,
						phone: props.values.phone,
						postal_address: props.values.postal_address,
						address: props.values.address,
						residence_permit_city: props.values.residence_permit_city,
						residence_permit_start_time: props.values.residence_permit_start_time,
						residence_permit_end_time: props.values.residence_permit_end_time,
						emergency_contact_name: props.values.emergency_contact_name,
						emergency_contact_phone: props.values.emergency_contact_phone
					},
		    }
	    }else {
	    	this.state = {
	    			formVals: {
						qq: "",
						wx: "",
						email: "",
						phone: "",
						postal_address: "",
						address: "",
						residence_permit_city: "",
						emergency_contact_name: "",
						emergency_contact_phone: ""
					},
		    }
	    }

	}
 	
 	componentWillReceiveProps(nextProps) {
		if(undefined != nextProps.values && nextProps.values !== this.props.values) {
	      this.setState({formVals: nextProps.values});
		}
		
	}

	handleLocalUpdate = (event) => {
		event.preventDefault();
		const { form,handleSubmitContactInfo } = this.props;
		const { formVals: oldValue } = this.state;
		form.validateFields((err, fieldsValue) => {
			if(err) return;
			form.resetFields();
			const formVals = { 
				...oldValue,
				...fieldsValue
			};
			this.setState({
				formVals,
			});
			
			if(formVals.residence_permit_start_time) {
      			formVals.residence_permit_start_time = moment(formVals.residence_permit_start_time._d).format("YYYY-MM-DD");
      		}
			if(formVals.residence_permit_end_time) {
      			formVals.residence_permit_end_time = moment(formVals.residence_permit_end_time._d).format("YYYY-MM-DD");
      		}
			handleSubmitContactInfo(formVals);

		});
	};
	

  render() {
    const {form: {getFieldDecorator}, cascaderList,editContactInfo,cancelEditContactInfo,values} = this.props;
    const { formVals } = this.state;
    let newPlace = [];
    if(values && values.residence_permit_city != "null" && values.residence_permit_city) {
    	const place = JSON.parse(values.residence_permit_city);
    	newPlace = place.map((item,index) => item = item + '');
    }
	return (
		<div>
			{editContactInfo?(
				<Form  onSubmit={this.handleLocalUpdate}>
				
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				        <Col md={12} sm={24}>
				          <FormItem  label="QQ">
				              {getFieldDecorator('qq', {
				              rules: [{ required: false, message: '最多输入15位字符',max: 15}],
				              initialValue: formVals.qq,
				              })(<Input placeholder="1-15位字符"/>)}
				          </FormItem>
				        </Col>
						
						<Col md={12} sm={24}>
				          <FormItem  label="微信">
				              {getFieldDecorator('wx', {
				              rules: [{ required: false, message: '最多输入30位字符',max: 30}],
				              initialValue: formVals.wx,
				              })(<Input placeholder="1-30位字符"/>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				    	<Col md={12} sm={24}>
				          <FormItem  label="个人邮箱">
				              {getFieldDecorator('email', {
				              rules: [{ required: false, message: '邮箱格式不符', pattern:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/}],
				              initialValue: formVals.email,
				              })(<Input placeholder="正规邮箱地址"/>)}
				          </FormItem>
				        </Col>
				        <Col md={12} sm={24}>
				          <FormItem  label="联系手机">
				              {getFieldDecorator('phone', {
				              rules: [{ required: true, message: '手机号码格式不符！',  pattern:/^1(3|4|5|6|7|8|9)\d{9}$/ }],
				              initialValue: formVals.phone,
				              })(<Input placeholder="正规手机号格式" />)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				        <Col md={12} sm={24}>
				          <FormItem  label="通讯地址">
				              {getFieldDecorator('postal_address', {
				              rules: [{ required: false, message: '最多输入40位字符',max: 40}],
				              initialValue: formVals.postal_address,
				              })(<Input placeholder="1-40位字符"/>)}
				          </FormItem>
				        </Col>
						
						<Col md={12} sm={24}>
				          <FormItem  label="现居住地">
				              {getFieldDecorator('address', {
				              rules: [{ required: false, message: '最多输入40位字符',max: 40}],
				              initialValue: formVals.address,
				              })(<Input placeholder="1-40位字符"/>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
		            	<Col  md={12} sm={24}>
					        <FormItem  label="居住证城市">
					            {getFieldDecorator('residence_permit_city', {
					            rules: [{ required: false }],
					            initialValue: newPlace,
					            })(<Cascader options={cascaderList != undefined?cascaderList.list:null} onChange={this.onChange} placeholder="请选择" changeOnSelect />)}
					        </FormItem>
				        </Col>
						
				        <Col md={12} sm={24}>
				          <FormItem  label="居住证办理日期">
				              {getFieldDecorator('residence_permit_start_time', {
				              initialValue: formVals.residence_permit_start_time?moment(formVals.residence_permit_start_time):null,
				              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择" onChange={this.birthChange}/>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    	<Col md={12} sm={24}>
				          <FormItem  label="居住证截止日期">
				              {getFieldDecorator('residence_permit_end_time', {
				              initialValue: formVals.residence_permit_end_time?moment(formVals.residence_permit_end_time):null,
				              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择" onChange={this.birthChange}/>)}
				          </FormItem>
				        </Col>
				        <Col md={12} sm={24}>
				          <FormItem  label="紧急联系人">
				              {getFieldDecorator('emergency_contact_name',{
				              	rules: [{ required: false, message: '最多输入10个字符',max: 10}],
				              	initialValue: formVals.emergency_contact_name,
				              })(<Input placeholder="1-10个字符" />)}
				          </FormItem>
				        </Col>
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				        <Col md={12} sm={24}>
				          <FormItem  label="紧急联系电话">
				              {getFieldDecorator('emergency_contact_phone',{
				              	rules: [{ required: false, message: '最多输入13个字符',max: 13}],
				              	initialValue: formVals.emergency_contact_phone,
				              })(<Input placeholder="1-13个字符"/>)}
				          </FormItem>
				        </Col>
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    	<Col md={12} sm={24}>
				    		<Button 
			            	size="large" 
			            	style={{marginRight: '10px'}}
			            	onClick={()=> {
			            		const { form } = this.props;
  								form.resetFields();
			            		cancelEditContactInfo();
			            	}}>
			            	取消
			           		</Button>
				            <Button size="large" type="primary" htmlType="submit">保存</Button>
				        </Col>
				    </Row>
				
				  </Form>
			  ):(
				<Form  {...formItemLayout}>
				
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				        <Col md={12} sm={24}>
				          <FormItem  label="QQ">
				              {getFieldDecorator('qq')(<span>{formVals.qq}</span>)}
				          </FormItem>
				        </Col>
						
						<Col md={12} sm={24}>
				          <FormItem  label="微信">
				              {getFieldDecorator('wx')(<span>{formVals.wx}</span>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				    	<Col md={12} sm={24}>
				          <FormItem  label="个人邮箱">
				              {getFieldDecorator('email')(<span>{formVals.email}</span>)}
				          </FormItem>
				        </Col>
				        <Col md={12} sm={24}>
				          <FormItem  label="联系手机">
				              {getFieldDecorator('phone')(<span>{formVals.phone}</span>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				        <Col md={12} sm={24}>
				          <FormItem  label="通讯地址">
				              {getFieldDecorator('postal_address')(<span>{formVals.postal_address}</span>)}
				          </FormItem>
				        </Col>
						
						<Col md={12} sm={24}>
				          <FormItem  label="现居住地">
				              {getFieldDecorator('address')(<span>{formVals.address}</span>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
		            	<Col  md={12} sm={24}>
					        <FormItem  label="居住证城市">
					            {getFieldDecorator('residence_permit_city',{
					            	initialValue: newPlace,
					            })(
					            	<Cascader disabled className={styles.nativePlace} options={cascaderList != undefined?cascaderList.list:null} placeholder=""/>
					            )}
					        </FormItem>
				        </Col>
						
				        <Col md={12} sm={24}>
				          <FormItem  label="居住证办理日期">
				              {getFieldDecorator('residence_permit_start_time')(<span>
				              	{formVals.residence_permit_start_time?moment(formVals.residence_permit_start_time).format('YYYY-MM-DD'):null}
				              	</span>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    	<Col md={12} sm={24}>
				          <FormItem  label="居住证截止日期">
				              {getFieldDecorator('residence_permit_end_time')(<span>
				              	{formVals.residence_permit_end_time?moment(formVals.residence_permit_end_time).format('YYYY-MM-DD'):null}
				              </span>)}
				          </FormItem>
				        </Col>
				        <Col md={12} sm={24}>
				          <FormItem  label="紧急联系人">
				              {getFieldDecorator('emergency_contact_name')(<span>{formVals.emergency_contact_name}</span>)}
				          </FormItem>
				        </Col>
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				        <Col md={12} sm={24}>
				          <FormItem  label="紧急联系电话">
				              {getFieldDecorator('emergency_contact_phone')(<span>{formVals.emergency_contact_phone}</span>)}
				          </FormItem>
				        </Col>
				    </Row>
				    
				</Form>
			  )}
		</div>
	
				
	);
  }

}

export default UpdateForm;
